<template>
  <div class="login_container">
    <el-container class="login_box">
      <!--左侧图片-->
      <el-aside width="55%" class="image"></el-aside>
      <!--登录表单-->
      <el-main>
        <h2>态势感知系统登录</h2>
        <el-form class="login_form">
          <!--手机号码-->
          <el-form-item prop="phone" class="input">
            <el-input v-model.trim="loginForm.phone"
                      size="small" clearable placeholder="请输入账号"
                      prefix-icon="el-icon-user-solid">
            </el-input>
          </el-form-item>
          <!--登录密码-->
          <el-form-item prop="password" class="input">
            <el-input v-model.trim="loginForm.password" type="password"
                      size="small" show-password placeholder="请输入密码"
                      prefix-icon="el-icon-unlock">
            </el-input>
          </el-form-item>
          <!--验证码-->
          <el-form-item class="input">
            <el-input v-model.trim="loginForm.code" clearable
                      size="small" placeholder="验证码" style="width: 40%"
                      prefix-icon="el-icon-lock">
            </el-input>
            <img class="imgCode" :src="imgURL">
            <a class="imgChange" href="#" @click="getCode">换一张</a>
          </el-form-item>
          <!--登录按钮-->
          <div class="buttons">
            <el-button class="login_btn" type="primary" @click="login">登 录</el-button>
          </div>
        </el-form>
        <div class="footer">
          <span>还没账号？</span>
          <router-link class="routerLink" to="/register">
            <span>去注册</span>
          </router-link>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    created() {
      this.getCode();
      this.getLoginStatus();
    },
    data(){
      return{
        imgURL: '',
        //这是登录表单的数据绑定对象
        loginForm: {
          phone: '',
          password: '',
          code: '',
          flag: true
        },
      };
      },
    methods:{
      /*获取验证码*/
      getCode() {
        this.$axios.get('/awareness/api/common/imgCode', {responseType: 'blob'})
            .then(res => {
              this.imgURL = window.URL.createObjectURL(res.data);
            })
            .catch( err => {
              this.$message.error("获取验证码失败");
            });
      },

      /*登录功能*/
      login() {
        if (!this.loginForm.phone){
          this.$message.error("请输入账号！");
          return;
        } else if (!this.loginForm.password) {
            this.$message.error("请输入密码！");
            return;
        }else if (!this.loginForm.code) {
          this.$message.error("请输入验证码！");
          return;
        } else {
            let loginInfo = this.$qs.stringify({
              phone: this.loginForm.phone,
              password:this.loginForm.password,
              code:this.loginForm.code
            });
            this.$axios.post('/awareness/api/common/login',loginInfo)
                .then((res)=> {
                  if (res.data.status.code == 1) {
                    this.$message.success('登陆成功！');
                    // 登录成功设置cookie
                    this.$cookies.set("loginInfo", this.loginForm.phone,0);
                    // 登录状态保存半小时
                    this.$cookies.set("status", "logined",60*30);
                    // 更新登录状态码
                    this.$cookies.set("loginStatus", 2,0);
                    this.$router.push('/home');
                  } else if (res.data.status.code == -6){
                    this.$message.error('账号不存在！');
                    this.getCode();
                    return;
                  } else if (res.data.status.code == -4){
                    this.$message.error('验证码错误！');
                    this.getCode();
                    return;
                  } else if (res.data.status.code == -7){
                    this.$message.error('密码错误！');
                    this.getCode();
                    return;
                  } else {
                    var msg = res.data.status.message;
                    this.$message.error(msg);
                  }

                })
                .catch(() => {
                  this.$message.error('连接失败！');
            });
          }
        },

      /*获取登录状态*/
      getLoginStatus() {
        this.$axios.get('/awareness/api/common/login/status')
            .then((res)=> {
              // console.log(res);
              //  将登录状态码存入cookie
              // console.log(res.data.status.code);
              this.$cookies.set("loginStatus", res.data.status.code,0);
              // 获取当前的登录状态码，如果已登录，则直接跳转到主页
              /*if (this.$cookies.get("loginStatus") == 2) {
                console.log('登录页开始跳转，当前状态码为2');
                this.$router.push("/home");
              }*/
            })
            .catch(() => {

            });
      }
    },
  };
</script>

<style scoped>
.login_container {
  height: 100%;
  background-image: url("../assets/imgs/background.svg");
  overflow: hidden;
}

.login_box {
  width: 70%;
  height: 60%;
  background-color: white;
  border-radius: 3px;
  margin: 5% auto;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.image {
  height: 100%;
  width: 55%;
  background: url("../assets/imgs/login_image.png") no-repeat;
}

.login_form {
  margin-top: 30px;
}

.buttons {
  margin-top: 25px;
  text-align: center;
}

h2{
  text-align: center;
  color: #2a7dff;
}

.input{
  width: 60%;
  margin: 10px auto;
}

.login_btn {
  width: 60%;
}

.footer {
  text-align: center;
  margin-top: 20%;
  font-size: 12px;
}

.routerLink{
  text-decoration: none;
  color: #2a7dff;
}

.routerLink:hover{
  color: coral;
}

.imgCode {
  margin-left: 10px;
  width: 80px;
  height: 30px;
  vertical-align: middle;
}

.imgChange {
  margin-left: 10px;
  font-size: 14px;
}

</style>